
import { Button, Tabs, Space, Dropdown, Menu, Input, Tag, message, Skeleton, Divider, Descriptions } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState } from 'react';
import { DOC_TYPE } from '@/consts/doc';
import { CopyOutlined } from '@ant-design/icons'
import { list, getById } from '@/services/doc/api'
import { CopyToClipboard } from 'react-copy-to-clipboard';
import UserBrief from '@/components/UserBrief'
import ApiParamEditTable, { ComplexParamEditTableView } from '../ApiParamEditTable'
import HistoryIcon from '@/pages/projects/components/ProjectDoc/HistoryIcon'
import RichText from '@/components/RichText'
import TextButton from '@/components/TextButton'
import ActionDropdown from '@/components/ActionDropdown'
import { ApiErrorCodeView } from '../ApiErrorCode'

const ApiDetail = (props) => {

    const {
        projectId,
        projectPermission,
        routeParam,
        apiId,
        onLoadDetail
    } = props;

    const [apiData, setApiData] = useState();

    useEffect(() => {
        if (apiId) {
            getById(projectId, apiId).then(result => {
                setApiData(result?.data)
                if (onLoadDetail) {
                    onLoadDetail(result?.data)
                }
            })
        }
    }, [apiId])

    const toEdit = () => {
        history.push(`/projects/${projectId}/api`, {
            apiId: apiId,
            mode:"edit"
        })
    }

    const showHistory = (data) => {
        return true;
    }

    if (!apiData) {
        return <div className={styles.body}><Skeleton></Skeleton></div>
    }

    return (<div className={styles.body}>
        <div className={styles.header}>
            <Space align="center" size={0} className={styles.headerTitle}>
                <Tag color="blue">{apiData.method}</Tag>
                <Tag color="blue">{apiData.protocol}</Tag>
                <div className={styles.url}>{apiData.url}
                    <span className={styles.copyIcon}>
                        <CopyToClipboard
                            text={apiData.url}
                            onCopy={() => {
                                message.success("复制成功")
                            }}>
                            <CopyOutlined />
                        </CopyToClipboard>
                    </span>
                </div>
            </Space>
            <Space>
                <Button>发布</Button>
                <Button onClick={toEdit}>编辑</Button>
                <HistoryIcon
                    docId={apiId}
                    showHistory={showHistory}
                    projectId={projectId}
                    docType={DOC_TYPE.API}
                    key="history"></HistoryIcon>
                <ActionDropdown actions={[
                    <TextButton key="copy">复制</TextButton>,
                    <TextButton key="delete" type="danger">删除</TextButton>
                ]} />

            </Space>
        </div>

        <div>
            <div className={styles.name}>
                <span>名称：{apiData.name}</span>
            </div>
        </div>
        <Space className={styles.othenInfo} size={24}>
            <UserBrief user={apiData.user}></UserBrief>
            <span>最后修改于:{apiData.updateTime}</span>
            <span>创建于:{apiData.createTime}</span>
        </Space>
        <div className={styles.partName}>请求</div>
        { apiData.request?.pathParams && apiData.request?.pathParams.length > 0 &&
            (<div>
                <div className={styles.blockName}>路径参数</div>
                <ApiParamEditTable bordered mode="view" value={{ fields: apiData.request?.pathParams }} />
            </div>)
        }
        { apiData.headers && apiData.headers.fields &&
            (<div>
                <div className={styles.blockName}>请求头</div>
                <ApiParamEditTable bordered mode="view" value={apiData?.headers} />
            </div>)
        }
        { apiData.request?.queryParams && apiData.request.queryParams.fields &&
            (<div>
                <div className={styles.blockName}>Query参数</div>
                <ApiParamEditTable bordered mode="view" value={apiData?.request.queryParams} />
            </div>)
        }
        { apiData.request?.body && apiData.request.body.fields &&
            (<div>
                <div className={styles.blockName}>请求体</div>
                <ComplexParamEditTableView bordered={true} value={apiData.request?.body} />
            </div>)
        }
        <div className={styles.partName}>响应</div>
        { apiData.response?.headers && apiData.response.headers.fields &&
            (<div>
                <div className={styles.blockName}>响应头</div>
                <ApiParamEditTable bordered mode="view" value={apiData.response?.headers} />
            </div>)
        }
        { apiData.response?.body && apiData.response.body.fields &&
            (<div>
                <div className={styles.blockName}>响应体</div>
                <ComplexParamEditTableView bordered={true} value={apiData.response?.body} />
            </div>)
        }
        { apiData.response?.errorCodeList && apiData.response.errorCodeList.length > 0 &&
            (<div>
                <div className={styles.blockName}>关联错误码</div>
                <ApiErrorCodeView value={apiData?.response.errorCodeList}></ApiErrorCodeView>
            </div>)
        }

        <div className={styles.partName}>描述</div>
        <div className={styles.description}>
            <RichText value={apiData?.description?.text}>
            </RichText>
        </div>

    </div>)
}


export default ApiDetail;